<script setup lang="js">
import { reactive, ref, shallowRef } from 'vue'

const deepRef = ref({ count: { val: 0 } })
const shallow_ref = shallowRef({ count: { val: 0 } })
let deepReactive = reactive({ count: { val: 0 } })

function resetRef() { deepRef.value = { count: { val: 1 } } }
function resetShallowRef() { shallow_ref.value = { count: { val: 1 } } }
function resetReactiveCount() { deepReactive.count = { val: 1 } }
function resetReactive() { deepReactive = reactive({ count: { val: 1 } }) }
function countUpReactive() { deepReactive.count.val++ }
function countUpShallowRef() { shallow_ref.value.count.val++ }
function countUpRef() { deepRef.value.count.val++ }
</script>

<template>
  <q-page class="q-pa-md">
    <q-banner class="bg-amber-4 q-mb-md">
      <p class="text-h4">陈一非 23211860123</p>
    </q-banner>

    <!-- 使用flex布局确保每行占用相同宽度 -->
    <div class="flex flex-column items-center gap-md">
      <!-- 第一行两个按钮 -->
      <div class="w-full max-w-md flex justify-center gap-md">
        <q-btn @click="countUpRef" label="countUpRef" color="primary" width="150px" height="48px" />
        <q-btn @click="countUpShallowRef" label="countUpShallowRef" color="primary" width="150px" height="48px" />
      </div>
      
      <!-- 第二行一个按钮，但占用相同宽度 -->
      <div class="w-full max-w-md flex justify-center gap-md">
        <q-btn @click="countUpReactive" label="countUpReactive" color="primary" width="150px" height="48px" />
        <!-- 占位元素，确保这行与其他行宽度相同 -->
        <div class="w-37.5"></div>
      </div>
      
      <!-- 第三行两个按钮 -->
      <div class="w-full max-w-md flex justify-center gap-md">
        <q-btn @click="resetRef" label="resetRef" color="secondary" width="150px" height="48px" />
        <q-btn @click="resetShallowRef" label="resetShallowRef" color="secondary" width="150px" height="48px" />
      </div>
      
      <!-- 第四行两个按钮 -->
      <div class="w-full max-w-md flex justify-center gap-md">
        <q-btn @click="resetReactiveCount" label="resetReactiveCount" color="secondary" width="150px" height="48px" />
        <q-btn @click="resetReactive" label="resetReactive" color="secondary" width="150px" height="48px" />
      </div>
    </div>

    <q-list bordered class="mt-md">
      <q-item><q-item-section>deepRef: {{ deepRef.count.val }}</q-item-section></q-item>
      <q-item><q-item-section>shallowRef: {{ shallow_ref.count.val }}</q-item-section></q-item>
      <q-item><q-item-section>deepReactive: {{ deepReactive.count.val }}</q-item-section></q-item>
    </q-list>
  </q-page>
</template>
